<style scoped>
    @import url("../../assets/css/login.css");
</style>
<template>
    <div class="login-container">
        <div class="topbar">
          <ul>
            <li><a href="javascript:;">生产企业</a></li>
            <li><a href="javascript:;">园区</a></li>
            <li><a href="javascript:;">咨询企业</a></li>
            <li><a href="javascript:;">检测企业</a></li>
            <li><a href="javascript:;">个体专家</a></li>
            <li><a href="javascript:;">个体评价师</a></li>
          </ul>
          <div class="top_user">
            <span>未登录，<a href="javascript:;">请登录</a></span>
            <ul>
              <li><a href="javascript:;">控制台</a></li>
              <li><a href="javascript:;">APP下载</a></li>
              <li><a href="javascript:;">客户服务</a></li>
            </ul>
          </div>
        </div>
        <div class="logo_nav">
          <div class="wrapper">
            <img src="static/images/logo.png" alt="logo" class="logo">
            <a href="javascript:;" class="btn_register">立即注册</a>
          </div>
        </div>
        <div class="mid_infor">
          <div class="infor">
            <h3>标准的评价流程</h3>
            <p>平台提供标准的评价流程，让咨</p>
            <p>询评价工作效率更高，评价方案</p>
            <p>客户更满意！</p>
            <p></p>
          </div>
          <el-card class="login-form">
            <el-form ref="loginForm" label-position="left" label-width="0px" :model="loginForm" :rules="loginRules">
              <h3 class="title">登录三并联云平台</h3>
              <el-form-item prop="username">
                <span class="icon-container"><i class="iconfont icon-weibiaoti1"></i></span>
                <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="邮箱"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <span class="icon-container"><i class="iconfont icon-3701mima"></i></span>
                <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
                          placeholder="密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
                  登录
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>

        <div class="full-page-background" style="background-image: url(/static/images/bg_login.png); display: block;"></div>
        <!--<footer class="footer footer-transparent">-->
            <!--<div class="container">-->
                <!--<p class="copyright pull-right">-->
                    <!--© 2017 云帆公寓 - 成都阳帆网络科技有限公司-->
                <!--</p>-->
            <!--</div>-->
        <!--</footer>-->
    </div>
</template>
<script>
    import ElMenu from 'element-ui/packages/menu/src/menu'
    import ElMenuItem from 'element-ui/packages/menu/src/menu-item'
    import ElCard from 'element-ui/packages/card/src/main'
    import ElForm from 'element-ui/packages/form/src/form'
    import ElFormItem from 'element-ui/packages/form/src/form-item'
    import ElInput from 'element-ui/packages/input/src/input'
    import ElButton from 'element-ui/packages/button/src/button'
    import { Message } from 'element-ui'
    export default {
      components: {
        ElButton,
        ElInput,
        ElFormItem,
        ElForm,
        ElCard,
        ElMenuItem,
        ElMenu
      },
      data () {
        return {
          loginForm: {
            username: '',
            password: ''
          },
          loading: false,
          loginRules: {
            username: [{ required: true, message: '请输入登录邮箱', trigger: 'blur' }],
            password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }]
          }
        }
      },
      methods: {
        handleLogin () {
          const self = this
          this.$refs.loginForm.validate((valid) => {
            if (valid) {
              self.loading = true
              this.$store.dispatch('doLogin', self.loginForm).then(() => {
                self.loading = false
                this.$router.push({ path: '/' })
              }, response => {
                Message.error(response.data.message)
                self.loading = false
              })
            } else {
              return false
            }
          })
        }
      }
    }
</script>
